<template>
<!--我的订单-->
  <div class="orders">
      <div class="titleWrap font14">
        <p class="titleName">我的能力</p>
      </div>
      <div class="showwrap">
        <router-link to="/ziliao/ablity_leida" tag="div" class="circleOut">
          <i-circle :percent="ablityPer" :size="184" :trail-width="4" :stroke-width="5" trail-color="#eeeff3" stroke-color="#957960" dashboard>
            <span class="demo-circle-inner" style="font-size:40px">{{myAbility}}</span>
            <p class="mypoint">我的能力分</p>
          </i-circle>
          <span class="abilityTip">能力雷达</span>
        </router-link>
        <div class="circleGroup">
          <router-link to="/ziliao/ablity_xuefen" >
            <i-circle
              :percent="studyPer"
              :size="110"
              :trail-width="3"
              :stroke-width="4"
              trail-color="#ededed"
              stroke-color="#957960"
              dashboard
              style="margin-right: 100px;"
            >
              <span class="demo-circle-inner" style="font-size:16px">{{studyScore}}</span>
              <p class="mypoint">学历分</p>
            </i-circle>
          </router-link>
          <a @click.stop.prevent="tianti" >
            <i-circle
              :percent="tiantiPer"
              :size="110"
              :trail-width="3"
              :stroke-width="4"
              trail-color="#ededed"
              stroke-color="#957960"
              dashboard
              style="margin-right: 100px;">
              <span class="demo-circle-inner" style="font-size:16px">{{date}}日已测评</span>
              <p class="mypoint">能力天梯</p>
            </i-circle>
          </a>
          <router-link to="/ziliao/ablity_job">
            <i-circle
              :percent="workPer"
              :size="110"
              :trail-width="3"
              :stroke-width="4"
              trail-color="#ededed"
              stroke-color="#957960"
              dashboard>
              <span class="demo-circle-inner" style="font-size:16px">{{workScore}}</span>
              <p class="mypoint">工作分</p>
            </i-circle>
          </router-link>
        </div>
      </div>
      <div class="pointInfo">
        <p class="times">本周共测评<span>{{testWeekNum}}</span>次</p>
        <div >
          <!--<canvas id="mountNode" width="700px" height="220"></canvas>-->
          <!--<div id="mountNode" ></div>-->
          <div id="main" style="height:200px;"></div>
        </div>
        <!--<a @click.prevent.stop="test" class="abilityTip starBtn"  tag="p">开始评测</a>-->
      </div>
    <Modal v-model="sure" title="购买人才能力测评" @on-ok="apply">
      <p>您尚未购买人才能力测评，是否前去购买？</p>
    </Modal>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
  </div>
</template>
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .titleWrap {
    height: 40px;
    /*font-size: 18px;*/
    padding-bottom: 20px;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 20px;
    color: #957960;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
    }
  }
  .showwrap {
    text-align: center;
    .circleOut {
      cursor: pointer;
      display: inline-block;
      width: 260px;
      height: 260px;
      padding-top: 38px;
      background: url("../../assets/cricleBack.png") no-repeat center center;
      background-size: 260px;
    }

    .circleGroup {
      margin-top: 40px;
      text-align: center;
      a{
        color: #264570;
      }
    }
  }
  .mypoint {
    font-size: 14px;
    margin-top: 12px;
    color: #957960;
    text-align: center;
  }
  .abilityTip {
    display: inline-block;
    height: 42px;
    padding: 0 15px;
    border-radius: 21px;
    text-align: center;
    line-height: 42px;
    background-color: #957960;
    color: #fff;
    min-width: 130px;
    /*font-size: 16px;*/
  }
  .pointInfo {
    padding: 30px;
    background-color: #f9f9f9;
    text-align: center;
    margin-top: 30px;
    .pointNames {
      font-size: 16px;
      color: #333;
    }
    .pointTimer {
      font-size: 20px;
      color: #666;
      margin-top: 10px;
    }
    .pointShow {
      font-size: 28px;
      display: inline-block;
      color: #957960;
      margin-top: 5px;
      span {
        font-size: 60px;
      }
    }
    .times {
      font-size: 16px;
      color: #999;
      span {
        color: #957960;
      }
    }
  }
  .starBtn {
    margin-top: 30px;
    cursor: pointer;
    min-width: 220px;
  }
  .starBtn:hover {
    /*background-color: #062e50;*/
  }

</style>
<!--<script src="../static/jquery-3.2.1.min.js"></script>-->
<!--<script src="../static/vue.js"></script>-->
<!--<script src="../static/vue-resource.min.js"></script>-->
<script type="text/ecmascript-6">
  import {userAbility,centreInfoWeb,lineData,addOrder,abilityPage,line_data2} from  '../../http'
  import {getStore} from '../../storage'
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  require('echarts/lib/component/tooltip')
    export default {
        name: 'orderdetail',
        props: {},
        data() {
            return {
              isSpinShow:false,
              // answerRecord:'',            //测评详情(已修改为折线图)
              isBuy:2,                    //是否购买
              myAbility:0,                //能力分
              studyScore:0,              //学历分
              workScore:0,               //工作分
              ablityPer:0,              //能力分比值
              studyPer:0,               //学历分比值
              workPer:0,                //工作分比值
              tiantiPer:0,              //天梯比值
              testWeekNum:'',           //本周测评次数
              date:'',                  //测评天数
              sure:false,

              // userId: userId,
              datas:['1','2','4','5','2','4','5'],
              scores: ['1','2','4','5','2','4','5']
            };
        },
        methods: {
          tianti(){
            //用户是否登录
            centreInfoWeb().then(res => {
              if(res.code === 200){
                //是否购买人才测评
                abilityPage().then(res => {
                  if(res.code === 200) {
                    this.ability = res.data.ability;
                    this.isBuy = res.data.isBuy;
                    //已购买测评，且同意协议
                    if (this.isBuy === 1 ) {
                      this.$router.push({
                        name:'ablity_tianti'
                      })
                    }else{
                      this.sure = true;
                    }
                  }
                }).catch()
              }else{
                this.$parent.$refs.loginInput.showModal();
              }
            }).catch()
          },
          //购买人才测评
          apply(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //创建订单
                  addOrder({type: 'OT_APPRAISAL', targetId: 1, applyType: '3'}).then(res => {
                    this.isSpinShow = false;
                    if (res.code === 200) {
                      //跳转支付页面
                      this.$router.push({
                        name: 'buy',
                        query: {
                          orderId: res.data.orderId
                        }
                      })
                    } else {
                      this.$Notice.warning({
                        title: "人才测评提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  })
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal();
                }
              }).catch()
            }
          },
          //人才测评
          test() {
            //用户是否登录
            centreInfoWeb().then(res => {
              if(res.code === 200){
                //是否购买人才测评
                abilityPage().then(res => {
                  if(res.code === 200) {
                    this.ability = res.data.ability;
                    this.isBuy = res.data.isBuy;
                    //已购买测评
                    if (this.isBuy === 1 ) {
                      //是否编辑教育经历
                      if(res.data.education === 1){
                        this.$router.push({
                          name: 'ceping4'
                        })
                      }else{
                        this.$router.push({
                          name: 'ceping1'
                        })
                      }
                    }else{
                      this.sure = true;
                    }
                  }
                }).catch()
              }else{
                this.$parent.$refs.loginInput.showModal();
              }
            }).catch()
          },
          getAblity(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //用户能力页面
                  userAbility().then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      // this.answerRecord = res.data.answerrecord;
                      this.isBuy = res.data.isBuy;
                      this.myAbility = res.data.myAbility;
                      this.studyScore = res.data.studyScore;
                      this.workScore = res.data.workScore;
                      this.date = res.data.date;
                      this.testWeekNum = res.data.testWeekNum;
                      this.ablityPer = parseInt(res.data.myAbility) / parseInt(res.data.myAbilityAll) * 100;
                      this.studyPer = parseInt(res.data.studyScore) / parseInt(res.data.studyScoreAll) * 100;
                      this.workPer = parseInt(res.data.workScore) / parseInt(res.data.workScoreAll) * 100;
                      this.tiantiPer = parseInt(res.data.date) / this.getMonthDate() * 100;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                  // this.getZhexian(res.data.id)
                  this.getEchat(res.data.id)
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          },
          //获取折线图数据
          // getZhexian(id){
          //   lineData({userId:id}).then(res => {
          //     var data =res.data;
          //     var chart = new G2.Chart({
          //       container: 'mountNode',
          //       width: 700,
          //       height: 265,
          //       forceFit: true
          //     });
          //     const defs = {
          //       'score': {
          //         alias: '分值'
          //       }
          //     };
          //     chart.source(data,defs);
          //
          //     chart.scale({
          //       days: {
          //         range: [0, 1]
          //       }
          //     });
          //     chart.areaStack().position('days*score').color('#cd9a5b');
          //     chart.lineStack().position('days*score').tooltip(false).color('#fab27b');
          //     chart.pointStack().position('days*score').color('#fab27b').shape('circle');
          //     chart.render();
          //   }).catch()
          // },
          //获取当月天数，用于天梯图展示
          getMonthDate(){
            var myDate = new Date()
            var  day = new Date(myDate.getFullYear(),
              myDate.getMonth(),0);
            return day.getDate();
          },
          getEchat(userId){
            line_data2({userId:userId}).then(res => {
              var lineData =res.data;
              var myChart = echarts.init(document.getElementById('main'));
              var option = {
                tooltip: {
                  trigger: 'axis',
                  backgroundColor:'#F7C497',
                  borderColor:'#f7f7f7',
                  borderRadius:2,
                  textStyle:{
                    color:"#556B2F",
                    fontSize:'10'
                  },
                  axisPointer:{
                    type: 'line',
                    lineStyle: {
                      color: '#FF8C00',
                      width: 1,
                      type: 'solid'
                    },
                    crossStyle: {
                      color: '#1e90ff',
                      width: 1,
                      type: 'dashed'
                    },
                    shadowStyle: {
                      color: 'rgba(150,150,150,0.3)',
                      width: 'auto',
                      type: 'default'
                    }
                  }
                },
                legend: {
                  show: false,
                  data: ['分值']
                },
                grid: {
                  y:10,
                  x:30,
                  x2:30,
                  y2:30,
                  borderWidth:0,
                  backgroundColor: '#f7f7f7'
                },
                calculable: true,
                xAxis: [
                  {
                    type: 'category',
                    data: lineData.datas,
                    axisLine: {
                      show: true,
                      lineStyle: {color: '#f7f7f7'}
                    },
                    splitLine: {
                      show: false, lineStyle: {
                        type: 'solid'
                      },
                    },//去除网格线
                    axisLabel : {
                      formatter: '{value}',
                      textStyle: {
                        color: '#333'
                      }
                    },
                    boundaryGap: false,

                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    max:50,
                    axisLine: {
                      show: true,
                      lineStyle: {color: '#FFF5EE'}
                    },
                    axisTick:{
                      color: '#333',
                      width: 1
                    },
                    axisLabel : {
                      formatter: '{value}',
                      textStyle: {
                        color: '#333'
                      }
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        type: 'dotted'
                      }
                    },
                  }
                ],
                series: [
                  {
                    name: '分值',
                    type: 'line',
                    smooth: true,
                    itemStyle: {normal: {  color: "rgba(247,196,151,0.9)",lineStyle:{
                          color:'rgba(247,196,151,0.9)'
                        },areaStyle: {color: 'rgba(247,196,151,0.7)', type: 'default'}}},
                    data: lineData.scores
                  }
                ]
              };
              // 为echarts对象加载数据
              myChart.setOption(option);
            });
          }
        },
        created() {
          this.getAblity()
        },
        components: {
        }
    }
</script>
